<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!--meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black"-->
    <title></title>
    <script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" charset="utf-8">
      	mui.init();
function plusReady(){
   	var w=null;
//	var url='https://api.heweather.com/x3/weather?cityid=CN101280601&key=d3a30f5f6adb4118adf1d43017a6cc4e';//和风天气
	var url='http://apis.baidu.com/apistore/weatherservice/recentweathers?cityid=101280601';
	w=plus.nativeUI.showWaiting();
	// 请求天气信息
	var xhr=new XMLHttpRequest();
	xhr.onreadystatechange=function(){
		switch(xhr.readyState){
			case 4:
			w.close();w=null;
			if(xhr.status==200){
				outLine("----- 请求成功 -----"+new Date().toLocaleTimeString());
//				outLine( xhr.responseText );
//				console.log(xhr.responseText);
				refreshData(JSON.parse(xhr.responseText));
			}else{
				outLine("----- 请求失败 -----");
				outLine( xhr.status );
				plus.nativeUI.alert("获取信息失败！",null,"");
			}
			break;
			default:
			break;
		}
	}
	xhr.open('GET',url);
	console.log("请求天气信息："+url);
	xhr.setRequestHeader('apikey','a2a84c31a03fd0b53c3a1000c3589508');
	xhr.send();
}
document.addEventListener('plusready',plusReady,false);

function runChrome(){
	var url='http://apis.baidu.com/apistore/weatherservice/recentweathers?cityid=101280601';
	var xhr=new XMLHttpRequest();
	xhr.onreadystatechange=function(){
		switch(xhr.readyState){
			case 4:
			if(xhr.status==200){
				console.log("----- 请求成功 -----"+new Date().toLocaleTimeString());
				refreshData(JSON.parse(xhr.responseText));
			}else{
				console.log("----- 请求失败 -----");
				console.log( xhr.status );
			}
			break;
			default:
			break;
		}
	}
	xhr.open('GET',url);
	console.log("请求天气信息："+url);
	xhr.setRequestHeader('apikey','a2a84c31a03fd0b53c3a1000c3589508');
	xhr.send();
}
runChrome();
setInterval(runChrome,60000*60);
//setInterval(plusReady,60000*60);

function refreshData(d){
	d = d.retData;
	console.log(JSON.stringify(d));
	document.getElementById("today.curTemp").innerText=d.today.curTemp;
	document.getElementById("today.aqi").innerText=d.today.aqi;
	document.getElementById("today.temp").innerText=d.today.lowtemp.replace("℃","")+' ~ '+d.today.hightemp;
	document.getElementById("today.png").src=getpng(d.today.type);
	document.getElementById("today.type").innerText=d.today.type;
//	outLine(d.today.curTemp);
	document.getElementById("n1.day").innerText=d.forecast[0].week;
	document.getElementById("n1.temp").innerText=d.forecast[0].lowtemp.replace("℃","")+' ~ '+d.forecast[0].hightemp;
	document.getElementById("n1.png").src=getpng(d.forecast[0].type);
	document.getElementById("n1.type").innerText=d.forecast[0].type;

	document.getElementById("n2.day").innerText=d.forecast[1].week;
	document.getElementById("n2.temp").innerText=d.forecast[1].lowtemp.replace("℃","")+' ~ '+d.forecast[0].hightemp;
	document.getElementById("n2.png").src=getpng(d.forecast[1].type);
	document.getElementById("n2.type").innerText=d.forecast[1].type;

	document.getElementById("n3.day").innerText=d.forecast[2].week;
	document.getElementById("n3.temp").innerText=d.forecast[2].lowtemp.replace("℃","")+' ~ '+d.forecast[0].hightemp;
	document.getElementById("n3.png").src=getpng(d.forecast[2].type);
	document.getElementById("n3.type").innerText=d.forecast[2].type;

	document.getElementById("n4.day").innerText=d.forecast[3].week;
	document.getElementById("n4.temp").innerText=d.forecast[3].lowtemp.replace("℃","")+' ~ '+d.forecast[0].hightemp;
	document.getElementById("n4.png").src=getpng(d.forecast[3].type);
	document.getElementById("n4.type").innerText=d.forecast[3].type;

}
function getpng(type){
	if(type.indexOf("阴")>=0){
		return "images/overcast.png";
	}else if(type.indexOf("云")>=0){
		return "images/cloudy4.png";
	}else if(type.indexOf("雪")>=0){
		return "images/snow4.png";
	}else if(type.indexOf("雨")>=0){
		return "images/light_rain.png";
	}else{
		return "images/sunny.png";
	}
}
    </script>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body background="images/wall/xingkong2.jpg">
			<!--button onclick="openNewWebview()">入门开发教程</button-->
		<header id="header" class="mui-bar mui-bar-nav">
			<!--div id="back"></div-->
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">深圳</h1>
			<a id="rightBar" class="mui-icon mui-icon-bars mui-pull-right"></a>
			<!--div class="nvbt iabout" onclick="clicked('about.html','zoom-fade-out',true)"></div-->
		</header>
<table>
<tr>
<td colspan="4" align="center">
	<p><span class="mui-h0">　</span></p>
	<p><span class="mui-h0">　</span></p>
	<p><span id="today.curTemp" class="mui-h0">20℃</span>
		<span class="mui-h4">　</span>
		<span id="today.aqi" class="mui-h4">10</span></p>
	<p id="today.temp" class="mui-h4">16 ~ 25℃</p>
	<p><img id="today.png" src="images/sunny.png" width="9%"/></p>
	<p id="today.type" class="mui-h3">晴</p>
</td>
</tr>
<tr>
<td colspan="4" align="center">
	<hr size="1" />
</td>
</tr>
<tr>
<td align="center">
	<p id="n1.day">周五</p>
	<p id="n1.temp">16 ~ 25℃</p>
	<p><img id="n1.png" src="images/sunny.png" width="30%"/></p>
	<p id="n1.type">晴</p>
</td>
<td align="center">
	<p id="n2.day">周五</p>
	<p id="n2.temp">16 ~ 25℃</p>
	<p><img id="n2.png" src="images/sunny.png" width="30%"/></p>
	<p id="n2.type">晴</p>
</td>
<td align="center">
	<p id="n3.day">周五</p>
	<p id="n3.temp">16 ~ 25℃</p>
	<p><img id="n3.png" src="images/sunny.png" width="30%"/></p>
	<p id="n3.type">晴</p>
</td>
<td align="center">
	<p id="n4.day">周五</p>
	<p id="n4.temp">16 ~ 25℃</p>
	<p><img id="n4.png" src="images/sunny.png" width="30%"/></p>
	<p id="n4.type">晴</p>
</td>
</tr>
</table>
<div id="output"></div>
</body>
</html>